<template>
  <el-card>
    <div slot="header">区域分析</div>
    <div class="info">
      <div class="left">
        请选择无人机编号
        <el-select v-model="value" placeholder="无人机编号">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <div class="middle1">
        请选择无人机任务编号
        <el-select v-model="value" placeholder="无人机任务编号">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <div class="middle2">
        请选择无人机飞行时间
        <el-time-select
          v-model="value"
          :picker-options="{
            start: '08:30',
            step: '00:15',
            end: '18:30',
          }"
          placeholder="无人机飞行时间"
        >
        </el-time-select>
      </div>
    </div>
    <div class="data">
      <el-table
        :data="tableData"
        :row-style="{ height: '40px' }"
        style="width: 100%; font-size: 22px"
        :header-cell-style="{ background: '#f4f3f9', color: '#606266' }"
      >
        <el-table-column prop="name" label="名称" width="390" align="center">
        </el-table-column>
        <el-table-column
          prop="navid"
          label="无人机ID"
          width="300"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="task"
          label="任务编号"
          width="300"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="flytime"
          label="飞行时长"
          width="300"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="area"
          label="覆盖面积"
          width="390"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="photo"
          label="拍摄照片数"
          width="390"
          align="center"
        >
        </el-table-column>
      </el-table>
    </div>
  </el-card>
</template>
  
  <script>
export default {
  data() {
    return {
      // 样例数据
      tableData: [
        {
          name: "大疆Mavic2 行业1",
          navid: "298CHBKROAOU5P",
          task: "1",
          flytime: "21min3s",
          area: "305㎡",
          photo: "13",
        },
        {
          name: "大疆Mavic2 行业1",
          navid: "298CHBKROAOU5P",
          task: "2",
          flytime: "4min5s",
          area: "276㎡",
          photo: "10",
        },
        {
          name: "大疆Mavic2 行业1",
          navid: "298CHBKROAOU5P",
          task: "3",
          flytime: "3min4s",
          area: "430㎡",
          photo: "27",
        },
        {
          name: "大疆Mavic2 行业1",
          navid: "298CHBKROAOU5P",
          task: "4",
          flytime: "6min18s",
          area: "578㎡",
          photo: "14",
        },
        {
          name: "大疆Mavic2 行业1",
          navid: "298CHBKROAOU5P",
          task: "5",
          flytime: "8min29s",
          area: "468㎡",
          photo: "16",
        },
        {
          name: "大疆Mavic2 行业2",
          navid: "MO782B1JOI8SAF",
          task: "6",
          flytime: "7min28s",
          area: "355㎡",
          photo: "24",
        },
        {
          name: "大疆Mavic2 行业2",
          navid: "MO782B1JOI8SAF",
          task: "7",
          flytime: "6min44s",
          area: "296㎡",
          photo: "19",
        },
        {
          name: "大疆Mavic2 行业3",
          navid: "DMQ013SFA91NAS",
          task: "8",
          flytime: "7min33s",
          area: "366㎡",
          photo: "10",
        },
      ],
    };
  },
};
</script>
  
  <style scoped>
.info {
  height: 80px;
}
.button {
  font-size: 20px;
}
.left {
  margin-left: 80px;
  margin-top: 20px;
  height: 60px;
  width: 500px;
  float: left;
}
.middle1 {
  margin-top: 20px;
  height: 60px;
  width: 500px;
  float: left;
}
.middle2 {
  margin-top: 20px;
  height: 60px;
  width: 500px;
  float: left;
}
.right {
  margin-top: 20px;
  height: 60px;
  width: 500px;
  float: right;
}
.data {
  margin-left: 80px;
  margin-top: 60px;
  height: 900px;
}
</style>
  